<!DOCTYPE html>
<html>

	<head>
		<title>管理页面</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/new_file.css" />
		<script src="js/jquery-3.4.1.min.js"></script>
	</head>

	<body>

		<div class="jumbotron">
			<div class="jumbotron text-center">
				<nav class="navbar navbar-default navbar-fixed-top" style="width: 100%;">
					<div class="container">
						<div class="collapse navbar-collapse" id="myNavbar">
							<ul class="nav navbar-nav navbar-right">
								<li class="nav-item">
									<a id="book" class="navbar-default active" href="#">图书查看</a>
								</li>
								<li class="nav-item">
									<a id="user" class="navbar-default active" href="#">用户查看</a>
								</li>
								<li class="nav-item" style="margin-top: 8px;">
									<button class="btn" data-toggle="modal" data-target="#denglu">登录</button>
								</li>
								<li class="nav-item" style="margin-top: 8px; margin-left: 10px;">
									<button class="btn" data-toggle="modal" data-target="#zhuce">注册</button>
								</li>
							</ul>
						</div>
					</div>
				</nav>
				<div class="container">
					<form id="f_book" action="#" method="post">
						<div class="input-group">
							<input type="text" name="ISBN" class="form-control input-lg" style="width: 25%;" placeholder="ISBN">
							<input type="text" name="author" class="form-control input-lg" style="width: 25%;" placeholder="作者">
							<input type="text" name="bookname" class="form-control input-lg" style="width: 25%;" placeholder="书名">
							<input type="text" name="publisher" class="form-control input-lg" style="width: 25%;" placeholder="出版社">
							<span class="input-group-addon btn btn-primary">查找图书</span>
						</div>
					</form>
					<form id="f_user">
						<div class="input-group">
							<input type="text" name="id" class="form-control input-lg" style="width: 50%;" placeholder="用户ID">
							<input type="text" name="username" class="form-control input-lg" style="width: 50%;" placeholder="用户名">
							<span class="input-group-addon btn btn-primary">查找用户</span>
						</div>
					</form>
				</div>
				<div class="container">
					<div id="b_book">
						<button class="btn btn-lg btn-success">添加书籍</button>
						<button class="btn btn-lg btn-primary">编辑书籍</button>
						<button class="btn btn-lg btn-danger">删除书籍</button>
					</div>
					<div id="b_user">
						<button class="btn btn-lg btn-success">添加用户</button>
						<button class="btn btn-lg btn-primary">编辑用户</button>
						<button class="btn btn-lg btn-danger">删除用户</button>
					</div>
					<table id="t_user" class="table table-striped">
						<thead>
							<tr>
								<th><input type="checkbox"/></th>
								<th>用户ID</th>
								<th>用户名</th>
								<th>用户密码</th>
								<th>用户权限</th>
							</tr>
						</thead>
						<tbody id="list">
								<td><input type="checkbox"/></td>
								<td>1</td>
								<td>Anna</td>
								<td>1</td>
								<td>Anna</td>
							</tr>
							</label>
						</tbody>
					</table>
					<table id="t_book" class="table table-striped">
						<thead>
							<tr>
								<th><input type="checkbox"/></th>
								<th>ISBN</th>
								<th>书名</th>
								<th>作者</th>
								<th>价格</th>
								<th>出版社</th>
							</tr>
						</thead>
						<tbody id="list">
								<td><input type="checkbox"/></td>
								<td>1101</td>
								<td>apple</td>
								<td>lisi</td>
								<td>￥25.8</td>
								<td>可爱多出版社</td>
							</tr>
							</label>
						</tbody>
					</table>
				</div>
			</div>
	</body>
	<script type="text/javascript">
		$(function() {
			$("#book").click(function() {
				$("#b_book").css("display", "block");
				$("#b_user").css("display", "none");
				$("#f_book").css("display", "block");
				$("#f_user").css("display", "none");
				$("#t_book").css("display", "table");
				$("#t_user").css("display", "none");
			});
			$("#user").click(function() {
				$("#f_user").css("display", "block");
				$("#f_book").css("display", "none");
				$("#t_user").css("display", "table");
				$("#t_book").css("display", "none");
				$("#b_user").css("display", "block");
				$("#b_book").css("display", "none");
			});
		});
	</script>

</html>
